<template>
  <div>
    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess" ref="tableRef">
      <template #toolbar>
        <Popconfirm
          title="是否导出所筛选打卡记录?"
          ok-text="确认"
          cancel-text="取消"
          @confirm="confirm"
          @cancel="cancel"
        >
          <a-button type="primary"  color="warning"> 导出 </a-button>
        </Popconfirm>
      </template>
      <template #action="{ record }">
        <TableAction />
      </template>
    </BasicTable>
    <Drawer @register="registerDrawer" @success="handleSuccess" :type="type" />
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, unref, ref } from 'vue';
import { usePermission } from '/@/hooks/web/usePermission';
import { BasicTable, useTable, TableAction, TableActionType } from '/@/components/Table';
import { attendanceList, attendanceExportExcel } from '/@/api/backs/attendance/signIn';
import { useDrawer } from '/@/components/Drawer';
import Drawer from './components/Drawer.vue';
import { useRoute } from 'vue-router';

import { columns, searchFormSchema } from './components/tableData';
import { message, Popconfirm } from 'ant-design-vue';

export default defineComponent({
  name: 'MenuManagement',
  components: { BasicTable, Drawer, TableAction, Popconfirm },
  props: {},
  setup() {
    const { params } = useRoute(); // 路由信息
    const { hasPermission } = usePermission();
    const tableRef = ref<Nullable<TableActionType>>(null);
    const getTableAction = () => {
      const tableAction = unref(tableRef);
      if (!tableAction) {
        throw new Error('tableAction is null');
      }
      return tableAction;
    };

    const [registerDrawer, { openDrawer, closeDrawer }] = useDrawer();
    const [registerTable, { reload, setSelectedRowKeys, getForm }] = useTable({
      title: '考勤记录',
      api: attendanceList,
      searchInfo: {
        userId: params.id,
      },
      columns,
      formConfig: {
        labelWidth: 100,
        schemas: searchFormSchema,
      },
      useSearchForm: true,
      showTableSetting: true,
      showIndexColumn: false,
      beforeFetch: (res) => {
        if (res.time && res.time.length) {
          res.startTime = res.time[0];
          res.endTime = res.time[1];
          delete res.time;
        }
      },
    });
    const getSelectRowList = () => {
      return getTableAction().getSelectRows();
    };
    const setSelectedRowKeyList = (arr) => {
      setSelectedRowKeys(arr);
    };
    const data: any = reactive({
      type: 'add',
    });
    async function confirm() {
      const searchParmas = getForm().getFieldsValue();
      if(searchParmas.time && searchParmas.time.length){
        searchParmas.startTime = searchParmas.time[0];
        searchParmas.endTime = searchParmas.time[1];
        delete searchParmas.time
      }
      await attendanceExportExcel(searchParmas);
    }
    function cancel() {}
    function handleCreate() {
      openDrawer(true, {
        isUpdate: false,
      });
      data.type = 'add';
    }
    function handleSuccess(formData) {}

    function onFetchSuccess() {}

    return {
      ...toRefs(data),
      tableRef,
      registerTable,
      registerDrawer,
      handleCreate,
      handleSuccess,
      onFetchSuccess,
      getSelectRowList,
      setSelectedRowKeyList,
      hasPermission,
      confirm,
      cancel
    };
  },
});
</script>
